<template>
  <div>
    <el-dropdown @command="selectLanguage">
      <div class="currentLang">Language: {{ $i18n.locale==='zh'?'中文':'English' }}</div>
      <el-dropdown-menu>
        <el-dropdown-item command="zh" :disabled="$i18n.locale === 'zh'">中文</el-dropdown-item>
        <el-dropdown-item command="en" :disabled="$i18n.locale === 'en'">English</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  methods: {
    selectLanguage(newLanguage) {
      console.log(newLanguage)
      localStorage.setItem('lang', newLanguage)
      // 这里是选中语言下拉菜单的触发回调
      // 可以得到用户点选的语言选项
      this.$i18n.locale = newLanguage
    }
  }
}
</script>

<style lang="scss" scoped>
.currentLang {
  color: white;
}
</style>
